<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title> CSS grid 游戏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="../../0/style.css">
  </head>
  <body>
    <section id="sidebar">
      <div class="header">
        <div>
          <h1 class="title">CSS grid 游戏</h1>
        </div>
        <div id="level-counter">
          <span class="arrow left">
            <span class="triangle"></span>
          </span>
          <span id="level-indicator">
            <span id="labelLevel" class="translate">Level</span>
            <span class="current">1</span>
            <span id="labelOf" class="translate">of</span>
            <span class="total">1</span>
            <span class="caret">▾</span>
          </span>
          <span class="arrow right">
            <span class="triangle"></span>
          </span>
          <div id="levelsWrapper" class="tooltip">
            <div id="levels"></div>
            <div id="labelReset" class="translate">Reset</div>
          </div>
        </div>
      </div>
      <p id="instructions"></p>
      <div id="editor">
        <div id="css">
          <div class="line-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14</div>
          <pre id="before"></pre>
          <textarea id="code" autofocus autocapitalize="none"></textarea>
          <pre id="after"></pre>
        </div>
        <button id="next" class="translate">Next</button>
      </div>
      <div id="share">
        <div class="games">
          <a target="_blank" data-title="Flexbox Froggy" href="https://codepip.com/games/flexbox-froggy/">
            <img src="images/games/flexbox-froggy.png">
          </a>
          <a target="_blank" data-title="Nth Cart" href="https://codepip.com/">
            <img src="images/games/nth-cart.png">
          </a>
          <a target="_blank" data-title="Disarray" href="https://codepip.com/">
            <img src="images/games/disarray.png">
          </a>
          <a target="_blank" data-title="Code Crunchers" href="https://codepip.com/">
            <img src="images/games/code-crunchers.png">
          </a>
        </div>
        <p class="social">
          <span id="tweet">
            <a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="https://cssgridgarden.com" data-via="playcodepip" data-text="I just beat Grid Garden, a game for learning CSS grid layout!">Tweet</a>
            <a href="https://twitter.com/playcodepip" class="twitter-follow-button" data-show-count="false">Follow @playcodepip</a>
          </span>
          <span class="fb-like" data-href="https://cssgridgarden.com" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></span>
        </p>
      </div>
      
      <div id="custom-inline"></div>

      <div class="credits">
        <span id="labelFooter" class="translate">Grid Garden is created by</span>
        <a href="https://codepip.com">Codepip</a> •
        <a href="https://github.com/thomaspark/gridgarden/">GitHub</a> •
        <a href="https://twitter.com/playcodepip">Twitter</a> •
        <span id="language">
          <span id="languageActive" class="toggle translate">English</span>
          <span class="tooltip">
            <a href="#en">English</a>
            <a href="#es">Español</a>
            <a href="#fr">Français</a>
            <a href="#de">Deutsch</a>
            <a href="#nl">Nederlands</a>
            <a href="#it">Italiano</a>
            <a href="#pt-br">Português(BR)</a>
            <a href="#pt-pt">Português(PT)</a>
            <a href="#ca">Català</a>
            <a href="#sv">Svenska</a>
            <a href="#no">Norsk</a>
            <a href="#fi">Suomi</a>
            <a href="#pl">Polski</a>
            <a href="#hu">Magyar</a>
            <a href="#ro">Română</a>
            <a href="#al">Shqip</a>
            <a href="#bg">Български</a>
            <a href="#lv">Latviešu</a>
            <a href="#ru">Русский</a>
            <a href="#ua">Українська</a>
            <a href="#el">Ελληνικά</a>
            <a href="#tr">Türkçe</a>
            <a href="#ar">العربية</a>
            <a href="#fa">فارسی</a>
            <a href="#zh-cn">简体中文</a>
            <a href="#zh-tw">繁體中文</a>
            <a href="#ja">日本語</a>
            <a href="#ko">한국어</a>
            <a href="#vi">Tiếng Việt</a>
            <a href="#id">Bahasa Indonesia</a>
            <a href="#tl">Tagalog</a>
          </span>
        </span>
      </div>
      <div class="credits">
        <span id="flexboxFroggy" class="translate">Want to learn CSS flexbox? Play</span> <a href="../../css/css-website-layout.html">CSS  网页布局</a>.
      </div>
    </section>
    <section id="view">
      <div id="board">
        <div id="overlay">
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
        </div>
        <div id="plants"></div>
        <div id="garden"></div>
        <div id="soil">
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
          <span class="plot"></span>
        </div>
      </div>
    </section>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?3eec0b7da6548cf07db3bc477ea905ee";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();
      </script>
  </body>
</html>
